<template>
  <view class="login-dialog" v-if="isLoadedUser && (!userInfo || !isVip)">
    <view class="login-mask" @click="handleMask"></view>
    <view class="login-view">
      <Login v-if="!userInfo" />
      <Vip v-if="userInfo && !isVip"/>
    </view>
  </view>
</template>

<script setup>
import { ref, defineProps, computed, defineEmits } from 'vue'
import { useStore } from 'vuex'
import Login from  './Login.vue'
import Vip from  './Vip.vue'
const emits = defineEmits(['close'])
const store = useStore();
const userInfo = computed(()=> {
  return store.getters['user/userInfo']
})
const isLoadedUser = computed(()=> {
  return store.state.user.isLoadedUser
})
const isVip = computed(() => {
  return userInfo.value?.vip === 1
});
function handleMask(){
  emits('close')
}
</script>

<style lang="scss" scoped>
.login-dialog{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  .login-mask{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.3);
    z-index: 1;
  }
  .login-view{
    position: relative;
    z-index: 10;
  }
}
</style>
